<template>
  <!-- 患者 搜索 -->
  <el-select :value="value" :disabled="disabled" filterable remote clearable :remote-method="getSearch" @change="onChangePatient" @clear="onClear" placeholder="请输入患者姓名或电话">
    <el-option v-for="(item,index) in patientArray" :key="index" :value="item.patientId" :label="item.name+'（'+item.mobil+'）'"></el-option>
    <br>
    <pager v-model="pager" small @change-pagenum="getData"></pager>
  </el-select>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, String]
    },
    keyword: [String],
    dataList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      patientArray: [],
      form: {
        name: ""
      },
      pager: { pageSize: 10, pageNum: 1, total: 0 }
    };
  },
  mounted() {
    let th = this;
  },
  methods: {
    getSearch(name) {
      const th = this;
      th.form.name = name;
      th.pager.pageNum = 1;
      th.getData();
    },
    //获取患者
    getData() {
      let th = this;
      let j = {
        hpId: th.adminUser.hpId,
        nameOrMobile: th.form.name
      };
      Object.assign(j, th.pager);
      th.$api.getThePatientLibraryList(j).then(res => {
        if (res.executed) {
          th.patientArray = res.dataBody.list;
          th.pager.total = res.dataBody.total;
        }
      });
    },
    onChangePatient(value) {
      let th = this;
      th.$emit("input", value);
      th.$emit("change", value);
    },
    onClear() {
      let th = this;
      th.form.name = "";
      th.$emit("input", "");
      th.$emit("clear");
      th.getSearch();
    }
  },
  watch: {
    keyword: {
      immediate: true,
      handler: function(n, o) {
        let th = this;
        th.getSearch(n);
      }
    },
    dataList: {
      immediate: true,
      deep: true,
      handler: function(n) {
        const th = this;
        if (n && n.length > 0) {
          th.patientArray = n;
          th.pager.total = n.length;
          th.pager.pageNum = 1;
        }
      }
    },
    value(n) {
      const th = this;
      if (n === "") {
        th.getSearch();
      }
    }
  }
};
</script>